<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>默认的modal</title>
    <style>
        p,
        h4 {
            margin: 0;
        }
        
        .modal {
            width: 500px;
            background-color: #fff;
            border: 1px solid rgba(0, 0, 0, .2);
            border-radius: 6px;
            box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
        }
        
        .modal-header {
            padding: 15px;
            border-bottom: 1px solid #e5e5e5;
        }
        
        .modal-content div {
            padding: 20px;
        }
        
        .modal-footer {
            padding: 15px;
            text-align: right;
            border-top: 1px solid #e5e5e5;
        }
        
        .btn {
            padding: 5px 15px;
            border: none;
            outline: none;
        }
        
        .blue {
            color: #fff;
            background-color: #39f;
            border-color: #39f;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="modal">
            <div class="modal-header">
                <h4>提醒的标题</h4>
            </div>
            <div class="modal-content">
                <div>
                    在这里添加内容
                </div>
            </div>
            <div class="modal-footer">
                <input class="btn blue" type="button" value="确定" />
                <input class="btn" type="button" value="取消" />
            </div>
        </div>
    </div>
    <script>
        /*
                            设置的props：
                                modalTitle 提醒信息 默认为 '这是一个模态框'

                            定制模板：
                                slot为modal-content  定制提醒信息模板
                                slot为modal-footer   定制底部模板

                            监控子组件状态变化：
                                事件名on-ok        点击确定触发
                                事件名on-cancel   点击取消触发
                        */
    </script>
</body>

</html>